<template>
  <div class="lsc-reg">
    <div  class="lsc-reg-logo">
      <img src="../assets/logo.png" width="65%">
    </div>
    <div>
      <mt-field
        label="用户名"
        placeholder="请输入你的姓名" 
        v-model="reg.name"/>
      <mt-field 
        label="手机号码"
        placeholder="请输入你的手机号码" 
        type="tel" 
        v-model="reg.mobile"
        :attr="{ maxlength: 11 }"/>
      <mt-field
        label="邀请码"
        placeholder="请输入邀请码" 
        v-model="reg.referee_no"
        :attr="{ maxlength: 10 }"/>
      <mt-field 
        label="性别"
        placeholder="请输入你的性别" 
        type="text" 
        v-model="reg.sex"
        disabled
        @click.native="sheetVisible=true"/>
      <mt-field label="居住地址" placeholder="请输入省市区" type="text" disabled v-model="reg.area" @click.native="showArea"></mt-field>
      <mt-field label="" placeholder="请输入详细地址" type="textarea" rows="2" v-model="reg.address"></mt-field>
      <!-- <mt-field label="" placeholder="请输入验证码" v-model="reg.valid_code">
        <img src="../assets/logo.png" height="45px" width="100px">
      </mt-field> -->
        <mt-actionsheet
          :actions="actions"
          v-model="sheetVisible">
        </mt-actionsheet>
    </div>
    <div class="lsc-reg-button">
      <mt-button type="primary" style="width: 60%;" @click="onClickRegister">注册</mt-button>
      <span>
        <input type="checkbox" v-model="checked"  name="check" id="poloc">
        <label for="poloc">
          我同意
          <router-link to="/protocol">
            《大管家服务相关条款》
          </router-link>
        </label>
      </span>
    </div>
    
    <vue-city-picker ref="picker" @select="selectArea"></vue-city-picker>
  </div>
</template>

<script>

import api from '../api';
import vueCityPicker from 'vue-city-bspicker'

export default {
  name: 'reg',
  components: {
    vueCityPicker
  },
  data () {
    return {
      reg:{
        type: this.$route.query.type,
        name: '',
        mobile: '',
        valid_code: '',
        referee_no: '',
        sex: '',
        province_id: '',
        city_id: '',
        area_id: '',
        area: '',
        address: '',
        openid: localStorage.openId
      },
      checked: true,
      sheetVisible: false,
      actions: [
        {
          name: '男',
          method: this.onClickSex
        },
        {
          name: '女',
          method: this.onClickSex
        }
      ],
    }
  },
  created() {
  },
  methods: {
    onClickRegister() {

      let validReister = this.validReister(); // 校验手机号码
      if (validReister) return;
      this.postReister()
    },
    postReister() {
      console.log(this.reg)
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      this.axios.post(api.register.Register, this.reg)
        .then(res=>{
          this.$indicator.close();
          if (res.data.retcode != 0) {
            this.$toast({
              message: res.data.retmsg,
              position: 'bottom'
            })
          }else {
            localStorage.mid = res.data.data
            this.$router.push(`/${this.$route.query.path}`)
          }
        })
    },
    validReister() {
      if(!this.reg.name) {
        this.$toast('注册姓名不能为空！')
        return true;
      }
      if(!this.reg.mobile) {
        this.$toast('请填写正确的11位手机号码！')
        return true;
      }else if(new RegExp("^((1[0-9]))[0-9]{9,9}$").test(this.reg.mobile) == false){

        this.$toast('请填写正确的11位手机号码！')
        return true;

      }
      // if(!this.reg.valid_code) {
      //   this.$toast('请输入正确的验证码！')
      //   return false;
      // } else {
      //   return true;
      // }
      if(!this.checked) {
        this.$toast('请您同意用户条款！')
        return true;
      }
    },
    onClickSex(item) {
      this.reg.sex = item.name
    },
    showArea(){
        this.$refs['picker'].show();
    },
    selectArea(){
      this.reg.province_id = arguments[0][0]
      this.reg.city_id = arguments[0][1]
      this.reg.area_id = arguments[0][2]
      this.reg.area = `${arguments[2][0]} ${arguments[2][1]} ${arguments[2][2]}`
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

.lsc-reg-logo {
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
  background: #2aa8e3;
  margin-bottom: 2px;
}
.lsc-reg-button {
  width: 100%;
  /* position: fixed;
  bottom: 60px; */
  text-align: center;
  margin-top: 60px;
}
.lsc-reg-button span {
  display: block;
  padding-top: 10px;
}
.lsc-reg-button>span>label>a {
  color: #26a2ff;
  text-decoration: none;
}
.lsc-reg .mint-cell-value {
  max-width: 100%;
}
input[type="text" i]:disabled {
      background-color: rgb(255, 255, 255);
}
input:disabled {
  color: #000;
  opacity: 1;
}
</style>
